<template>
	<div id="screen-shot">
		<ApplyReport
			:nowRowData="nowRowData"
			:creditCode="creditCode"
			:applyNo="nowRowData.applyNo"
			:approvalStatus="-2"
			:isDetail="true"
			:params="params"
			:navTagList="navTagList"
			:isOkApproval ="isOkApproval"
		>
			<el-scrollbar max-height="50vh">
				<div class="progress-box">
					<div class="time-line" vv-loading="processLoad">
						<div class="time-line-item" v-if="isOkApproval">
							<div class="flex space-between align-center">
								<p class="text-title">{{ authAreaLevel() }} {{ userInfo.realName }}</p>
								<el-button type="primary" class="btn-save" @click="formRef.onSubmit()">保存</el-button>
							</div>
							<AplidForm ref="formRef" class="mt10" v-bind="formAuditConfig" v-model="formModel" @submit="onSubmit">
								<template v-slot:screenshotForm>
									<DragUpload v-model="formModel.screenList" />
								</template>
							</AplidForm>
						</div>
						<div class="time-line-item" v-for="(item, index) in lineTimeList" :key="index">
							<div class="time-line-item-header flex space-between align-center">
								<p class="text-time">{{ item.createTime ? formatCreateTime(item.createTime) : '待审批节点' }}</p>
								<div :class="item.approvalStatus == 3 ? 'text-error-tag' : 'text-success-tag'" v-if="item.statusLabel">{{ item.statusLabel }}</div>
							</div>
							<p class="text-title">{{ approvalHierarchyLabel[item.approvalHierarchy] || item.createUserName }}</p>
							<p class="text-value" v-if="item.approvalRemarks">{{ item.approvalRemarks }}</p>
							<p class="text-value" v-if="item.currentApproval">节点审批人：{{ item.currentApprovalUserName }}</p>
							<FileList v-if="item.approvalImgs" :value="item.approvalImgs" />
						</div>
					</div>
				</div>
			</el-scrollbar>
		</ApplyReport>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
// import ApplyReport from '@/views/instOperate/apply/ReportDetail/index.vue'
import ApplyReport from '../ApplyReport/index.vue'
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/index.vue'
import { getStore } from '@/utils/store'
import { useDateFormat } from '@vueuse/core'
import DragUpload from '@/views/aplid/DragUpload/index.vue'

const userInfo = getStore('userInfo') || {}
const props = withDefaults(
	defineProps<{
		creditCode?: string | number
		isDetail?: boolean
		nowRowData: any
		navTagList?: any
		organizationId?: string | number
	}>(),
	{
		isDetail: false,
		navTagList: [
			{ label: '机构填报内容（申请表）', value: 2 },
			{ label: '机构填报内容（床位审核表）', value: 4 },
			{ label: '机构申请需要上传的材料', value: 3 },
		],
	}
)

const emit = defineEmits(['refresh'])
let processLoad = ref(true)
const params = ref({
	belongDate: props.nowRowData.belongDate,
	subsidyProjectId: props.nowRowData.subsidyProjectId,
	organizationId: props.organizationId,
})

const authAreaLevel = () => {
	const authAreaS = [userInfo.authProvince, userInfo.authCity, userInfo.authArea, userInfo.authStreet, userInfo.authCommunity].filter(Boolean)
	let lenStr = {
		0: '省',
		1: '市',
		2: '区',
		3: '街道',
		4: '社区',
	}
	return lenStr[authAreaS.length - 1]
}

const approvalHierarchyLabel = {
	'1': '社区',
	'2': '街道',
	'3': '区',
	'4': '市',
	'5': '第三方',
}

const formRef = ref(null)
const formModel = ref({
	screenList: [],
})
const lineTimeList = ref([])

const formatCreateTime = (time) => {
	const ntme = useDateFormat(time, 'YYYY年MM月DD日 HH:mm:ss')
	return ntme.value
}

const statusLabel = {
	'-1': '作废',
	'0': '待审批',
	'1': '审批中',
	'2': '通过',
	'3': '驳回',
}

const formAuditConfig = {
	inline: false,
	showBtn: false,
	labelPosition: 'top',
	column: [
		{
			label: '审核意见',
			prop: 'approvalStatus',
			propName: 'subsidyTypeLabel',
			type: 'select',
			dicData: [
				{ label: '通过', value: 2 },
				{ label: '驳回', value: 3 },
			],
			multiple: false,
			span: 24,
			control: (e, model) => {
				return {
					approvalRemarks: {
						display: e == 3,
					},
					screenshot: {
						display: e == 3,
					},
				}
			},
		},
		{
			label: '驳回原因',
			prop: 'approvalRemarks',
			type: 'textarea',
			autosize: {
				minRows: 2,
			},
			span: 24,
		},
		{
			label: '',
			prop: 'screenshot',
			span: 24,
		},
	],
}

// 判断当前节点是否可以审批
let isOkApproval = ref(false)

const getInitData = async () => {
	let params = {
		fromId: props.nowRowData.id,
		randomNo: props.nowRowData.workflowRandom,
	}
	isOkApproval.value = await apiMod.view_approvalLogic_approvalEstimate(params).then((res) => {
		return res.data
	})

	apiMod.view_workflowApprovalLogic_process(params).then((res) => {
		lineTimeList.value = (res.data || [])
			.map((item) => {
				return {
					...item,
					statusLabel: statusLabel[item.approvalStatus],
				}
			})
			.reverse()
		if (isOkApproval.value) {
			lineTimeList.value = lineTimeList.value.filter((item) => item.id)
		}
		processLoad.value = false
	})
}

const onSubmit = (form, done) => {
	apiMod
		.view_workflowApprovalLogic_approval({
			...form,
			approvalImgs: form.screenList.join(','),
			fromId: props.nowRowData.id,
			randomNo: props.nowRowData.workflowRandom,
			screenList: undefined,
		})
		.then((res) => {
			ElMessage.success(res.data)
			emit('refresh')
			getInitData()
		})
	done()
}

watch(
	() => props.nowRowData,
	(newVal) => {
		if (newVal && newVal.id) {
			getInitData()
		}
	},
	{
		immediate: true,
		deep: true,
	}
)
</script>

<style scoped lang="scss">
.config-content {
	padding: 12px;
	margin-top: 20px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
}
.btn-save {
	min-width: 64px;
	height: 25px;
	border-radius: 4px;
	background: #0052d9;
	font-family: 'Microsoft YaHei';
	font-weight: 400;
	font-size: 16px;
	color: #fff;
}
@import '@/views/instOperate/components/styles/progress.scss';
</style>
